<template>
	<div>
		<el-card>
			<div slot="header">
				<span>账号列表</span>
			</div>
			<div>
				<!-- 表格 -->
				<!-- 账号内容 -->
				<el-table
					ref="multipleTable"
					:data="tableData"
					@selection-change="handleTabChange"
				>
					<!-- 设置权限是否要显示此按钮 只有super权限才能显示 -->
					<el-table-column type="selection"></el-table-column>
					<el-table-column
						prop="account"
						label="账号"
						width="150px"
					></el-table-column>
					<el-table-column
						prop="userGroup"
						label="用户组"
						width="150px"
					></el-table-column>
					<el-table-column
						prop="ctime"
						label="创建时间"
						width="150px"
					>
						<template slot-scope="{ row }">
							{{ row.ctime | formatYMD }}
						</template>
					</el-table-column>
					<!-- 操作 -->
					<el-table-column label="操作" width="260px">
						<!-- 得到表格中的这一行数据 -->
						<template slot-scope="{ row }">
							<el-button
								class="fff gree mrPx-8"
								@click="chandleDialog(row)"
								>编辑</el-button
							>
							<el-popconfirm
								class="confirm-del"
								confirm-button-text="确定删除"
								cancel-button-text="取消删除"
								icon="el-icon-info"
								icon-color="red"
								title="您确定要删除此账号吗"
								confirm-button-type="danger"
								@confirm="handleDel(row.id)"
							>
								<el-button slot="reference" type="danger"
									>删除</el-button
								>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页 -->
				<el-pagination
					class="my-15"
					:current-page="currentPage"
					:page-sizes="[2, 10, 15]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				>
				</el-pagination>

				<!-- 底部删除 -->
				<div>
					<el-button
						type="danger"
						@click="handleDels"
						:disabled="!this.ids.length"
						>批量删除</el-button
					>
					<el-button
						type="primary"
						class="fff gree"
						@click="toggleSelection()"
						:disabled="!this.ids.length"
						>取消选择</el-button
					>
				</div>
			</div>
		</el-card>
		<!-- 编辑弹窗 -->
		<el-dialog
			title="账号编辑"
			:visible.sync="modifyVisible"
			:close-on-click-modal="false"
		>
			<el-form :model="modifyForm" ref="formdDialog">
				<el-form-item label="账号" prop="account" label-width="55px">
					<el-input clearable v-model="modifyForm.account"></el-input>
				</el-form-item>
				<el-form-item label="用户组">
					<el-select v-model="modifyForm.userGroup">
						<el-option
							label="普通管理员"
							value="普通管理员"
						></el-option>
						<el-option
							label="超级管理员"
							value="超级管理员"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="modifyVisible = false">取 消</el-button>
				<el-button class="fff gree" @click="handleConfirm"
					>确 定</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		api_users_list,
		api_users_del,
		api_users_batchdel,
		api_users_edit,
	} from "@/apis/user";

	export default {
		data() {
			return {
				tableData: [],
				currentPage: 1, //前往第几页
				total: 0, //总共条数
				pageSize: 2, //每页显示几条
				modifyVisible: false,
				modifyForm: {
				account: "",
				userGroup: "普通管理员",
				},
				ids: [],
			};
		},
		created() {
			this.getAccountList();
		},
		methods: {
			async getAccountList() {
				const res = await api_users_list({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				});
				//   console.log(res);
				let { data, total } = res.data;
				this.tableData = data;
				this.total = total;
				// 解决页面Element末尾一条数据被删除之后，不会自动向前跳一页再获取数据，而是停留在当前页面显示数据为空
				if (data.length == 0 && this.currentPage != 1) {
					this.currentPage--;
					this.getAccountList();
				}
			},
			// 条数
			handleSizeChange(size) {
				this.pageSize = size;
				this.getAccountList();
			},
			// 第几页
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getAccountList();
			},
			// 删除单个账号
			async handleDel(id) {
				const res = await api_users_del({ id });
				//   console.log(res);
				if (res.data.code == 0) {
					this.getAccountList();
				}
			},
			// 获取id数组

			handleTabChange(selection) {
				this.ids = selection.map((v) => {
					return v.id;
				});
				//    console.log("selection",this.id);
			},
			// 批量删除
			handleDels() {
				this.$confirm("此操作将永久删除所选账号, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(async () => {
						const res = await api_users_batchdel({
							ids: this.ids,
						});
						//   console.log(res);
						if (res.data.code == 0) {
							// this.$message({
							// 	type: "success",
							// 	message: res.data.msg,
							// });
							this.getAccountList();
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			// 取消选择
			toggleSelection() {
				this.$refs.multipleTable.clearSelection();
				this.$message.warning("取消选择");
			},
			// 编辑显示弹框
			chandleDialog(row) {
				this.modifyVisible = true;
				// 表格中数据回填到编辑框中
				this.modifyForm = { ...row };
			},
			//  修改账号
			async handleConfirm() {
				const res = await api_users_edit(this.modifyForm);
				this.modifyVisible = false;
				this.getAccountList();
				// console.log(res);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.el-dialog {
		.el-input {
			width: 205px;
		}
	}
</style>
